<template>
    <div class="person">
        <h1>watch condition3  watch [Object type] defined by [reactive]</h1>
        <h2>name:{{ person.name }}</h2>
        <h2>age:{{ person.age }}</h2>
        <button @click="changeName">update name</button>
        <button @click="changeAge">update age</button>
        <button @click="changePerson">update person</button>
    </div>
</template>

<script setup lang="ts" name = 'Person'>
    import { reactive,watch } from "vue";
    //data
    let person = reactive({
        name:'zhangsan',
        age:18
    })

    //methods
    function changeName(){
        person.name += '~'
    }
    function changeAge(){
        person.age += 1
    }

    function changePerson(){
        Object.assign(person,{name:'lisi',age:80})
    }

    /**
     * watch 监视【reactive】定义的【对象数据】的地址值，默认开启深度监视
    watch的第一个参数是：被监视的数据
    第二个参数是：监视的回调
    */
    watch(person,(nv,ov)=>{
        console.log('person变化了',nv,ov);
    })
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}

li{
    font-size: 20px;
}
</style>